<template>
  <div>
    <div class="top">
          <img :src="picUrl" alt="">
    </div>
    <h1>我的听歌排行(共{{ weekData.length }}首)</h1>
      <div class="button" @click="$router.go(-1)">
        <span class="iconfont icon-arrow-left-bold"></span>
        返回
      </div>
    <div class="musiclist">
      <ul>
        <li v-for="(item, index) in weekData" :key="index"  @click="playmusic(item.song.id,item.song.name,item)">
          <span class="one">{{ index + 1 }}</span>
          <span class="two iconfont icon-xiazai"></span>
          <span class="three">{{ item.song.name }}</span>
          <span class="four iconfont icon-bofang"></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="less" scoped>
.top{
  width: 100%;
  height: 300px;
  img{
    width: 100%;
    height: 100%;
  }
}
  .button {
    color: #e5e5e5;
    width: 150px;
    height: 40px;
    line-height: 40px;
    font-size: 35px;
    margin: 10px 0;
    position: absolute;
    top: 0;
    left: 0;
    span {
      display: inline-block;
      font-size: 40px;
      vertical-align: top;
    }
  }
h1{
  color:#e5e5e5;
  font-size: 30px;
    margin: -60px 0 0 15px;
}
.musiclist {
  width: 100%;
  ul {
      margin-top: 20px;
    li {
      height: 80px;
      line-height: 80px;
      display: flex;
      &:nth-child(odd) {
        background: #e5e5e5;
      }
      &:nth-child(even) {
        background: #f9f9f9;
      }
      padding-left: 10px;
      font-size: 30px;
      span {
        display: inline-block;
        color: #676767;
        &.two {
          font-size: 30px;
          margin: 0 20px;
        }
        &.three {
          flex: 1;
          overflow: hidden;
        }
        &.four {
        display: block;
        // border: 5px solid #A6A6A6;
        font-size: 20px;
        height: 50px;
        width: 50px;
        line-height: 50px;
        border-radius: 50%;
          float: right;
          margin-right: 20px;
          margin-top: 18px;
          &::before{
            margin-left: 18px;
          }
        }
      }
    }
  }
}
</style>

<script>
import { getPlayHistory } from "../../api/base";
export default {
  data() {
    return {
      uid: this.$store.state.userId,
      weekData: {},
      index1:'',
      ar:[],
      coverImgUrl:'',
      track:[],
      picUrl:''
    };
  },
  methods: {
    getPlayList() {
      getPlayHistory({ uid: this.uid, type: 1 }).then((data) => {
        console.log(data.weekData);
        this.weekData = data.weekData;
        this.picUrl = data.weekData[1].song.al.picUrl;
      });
    },
      playmusic(id, name, item) {
    //   console.log(item.picUrl )
      console.log(id);
      console.log(name);
      console.log(item)
      console.log(this.weekData)
      let playMusicData = {
        coverImgUrl: item.song.al.picUrl,
        id,
        name,
        ar: item.song.ar,
        track:this.weekData
      };
      // 数据存存储
      this.$store.commit("musicDatafun", playMusicData);
    },
  },
  created() {
    this.getPlayList();
  },
};
</script>